<template>
  <div class="k3">
    <h3><dv-decoration-7>站点完成情况</dv-decoration-7></h3>
    <dv-border-box-10 class="bian" :color="['#50649a', '#50649b']">
      <div ref="myChart5" id="LDiv"></div>
    </dv-border-box-10>
  </div>
</template>

<script>
// echarts图表的引用
import * as echarts from "echarts";
import { zhuti } from "../assets/index.js";
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      gaugeData: [],
      stuName: [],
      classInfo: [], //订阅的消息
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectClassInfo", (msgName, data) => {
      this.classInfo = data;
      this.gaugeData = [];
      this.stuName = [];
      this.getInfo();
    });
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/sitestatusfinishedrate/list/${this.classInfo.year}/${this.classInfo.college}/${this.classInfo.major}/${this.classInfo.className}`
        ),
        method: "get",
      }).then((response) => {
        // console.log("个人站点信息,",response.data.rate);
        for (let index in response.data.rate) {
          this.gaugeData.push(response.data.rate[index].finishedRate * 100);
          this.stuName.push(response.data.rate[index].stuName);
        }
        this.$nextTick(() => {
          this.initialize();
        });
      });
    },
    initialize() {
      const myChart5 = echarts.init(this.$refs.myChart5, zhuti);
      const option5 = {
        // title: [
        //   {
        //     text: "个人站点完成情况",
        //   },
        // ],

        legend: {
          // data: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"],
          orient: "vertical",
          // x: "left", //可设定图例在左、右、居中
          // y: "bottom", //可设定图例在上、下、居中
        },
        polar: {
          radius: [30, "80%"],
        },
        angleAxis: {
          max: 100,
          startAngle: 75,
        },
        radiusAxis: {
          show: false,
          type: "category",
          data: this.stuName,
        },
        tooltip: { formatter: "{b}: {c}%" },
        series: {
          type: "bar",
          data: this.gaugeData,
          coordinateSystem: "polar",
        },
      };

      myChart5.setOption(option5);
      window.addEventListener("resize", function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用
        myChart5.resize();
      });
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k3 {
  display: flex;
  flex-direction: column; /* 子组件内部垂直排列 */
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
}
h3 {
  font-size: 18px;
  width: 100%;
  height: 100%;
  line-height: 100%;
  flex: 1;
  color: aqua;
  /* margin-bottom: 10px; */
}
#LDiv {
  width: 100%;
  height: 100%;
  flex: 9;
  box-sizing: border-box;
  /* background-color: aliceblue; */
  padding: 10px;
}
</style>
